<template>
	<div class="order-goods" style="height: 600px;overflow-y: auto;">
		<van-card
			v-for="item in goods"
			:key="item.id"
			:title="item.name"
			:num="item.num"
			:price="item.price"
			:thumb="item.img"
		>
			<div class="footer" slot="footer" >
        <van-stepper v-model="item.num" @change="numchange" />
      </div>
		</van-card>
		
		<van-cell-group>
			<van-field v-model="remark" placeholder="请输入备注" label="订单备注">
				<template slot="icon">
					
				</template>
			</van-field>
			
			<van-cell title="商品金额">
				<span class="red">¥{{totalPrice}}</span>
			</van-cell>
			<van-cell title="邮费">{{postage}}</van-cell>
			</van-cell-group>
			<div class="pay_way_group" >
			<div style="font-size: 14px;margin: 10px 15px;">选择支付方式</div>
				<van-radio-group v-model="payWay" @change="paymethod">
					<van-cell-group>
						<van-cell title="支付宝"  icon="alipay" style="color:#04aaff;"  >
							<van-radio name="1">
								
							</van-radio>
						</van-cell>
						
						<van-cell title="微信"  icon="wechat" style="color:#2ba339;">
							<van-radio name="2">
								
							</van-radio>
						</van-cell>
					</van-cell-group>
				</van-radio-group>

			</div>
	</div>
</template>

<script>
	import { Card } from 'vant';
	export default {
		name: "bottom-goods-info",
		props:[
			"newtotal"
		],
		data(){
			return {
				payWay:'1',
				remark: "",
				goods: [],
				postage:'6',
				total:this.newtotal
			}
		},
		mounted(){
			this.$nextTick(function() {
	        this.newgoods();
	      });
		},
		watch:{
			newtotal(v){
				this.total=v
			},
			total(v){
				this.$emit('inloading',v)
			}
		},
		methods:{
			paymethod(name){
				console.log(name)
				localStorage.setItem("paytype",name); 
			},
			numchange(numchange){
				console.log(numchange)
				  var cartpath=localStorage["goodsnew"];
			      var cid;
			      if(cartpath){
			          cartpath = JSON.parse(cartpath);
			          for (var i = 0; i < cartpath.length; i++){
			            if(cartpath[i].num != this.goods[i].num){
			              cid = this.goods[i].id;
			              localStorage.setItem("goodsnew",JSON.stringify(this.goods)); 
			            }
			          }
			       }
				this.newgoods();
			},
			newgoods(){
				this.goods = JSON.parse(localStorage["goodsnew"]);
				if(this.totalPrice > 49){
					this.postage='免运费';
					this.total=(this.totalPrice)*100;
				}else{
					this.postage='6';
					this.total=(this.totalPrice+6)*100;
				}
			}
		},
		computed: {
			totalPrice() {
		      return this.goods.reduce((total, item) => total + (item.price * item.num), 0);
		    }
		},
		components: {
			[Card.name]: Card,
		}
	}
</script>
<style lang="scss" scoped>
	.order-goods{
		background-color: #f8f8f8;
	}
	.pay_way_group img {
		vertical-align: middle;
	}
	.van-radio span {
		position: absolute;
		right:20px;
	}
		
</style>